<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="onClickReset">
        <el-form-item label="搜索">
          <el-input v-model="state.params.keyword" clearable placeholder="请输入用户昵称、手机号" />
        </el-form-item>
        <el-form-item label="支付类型">
          <el-select v-model="state.params.pay_type" placeholder="不限">
            <el-option v-for="item in payOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="结算状态">
          <el-select v-model="state.params.commission_status" placeholder="不限">
            <el-option v-for="item in commissionStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="会员信息">
          <el-tree-select v-model="treeValues" value-key="value" :data="treeDataOptions" :render-after-expand="false" @change="treeChange" />
        </el-form-item>
        <el-form-item label="团队人数">
          <el-select v-model="state.params.team_count" placeholder="不限">
            <el-option v-for="item in teamCountOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="客户类型">
          <el-select v-model="state.params.user_type" placeholder="不限">
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="代理筛选">
          <el-select v-model="state.params.colonel_id" placeholder="不限" filterable>
            <el-option v-for="item in agentOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="销售时间">
          <el-date-picker
            v-model="state.params._timeArr"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="methods.onSearch"
          />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <KToolbar>
        <template #right>
          <el-button type="default" :icon="Download" @click="onClickExportData">导出数据</el-button>
        </template>
      </KToolbar>

      <KTable v-bind="tableState" v-on="tableEvent">
        <template #settle_fee="s">
          <div class="table-text">
            {{ s.row.settle_fee }}
            <span :class="statusClassNameMap[s.row.commission_status]">
              {{ statusObj[s.row.commission_status] }}
            </span>
          </div>
        </template>
        <template #remark="s">
          <div class="table-text">
            <span v-if="s.row.remark">{{ s.row.remark }}</span>
            <el-link type="primary" @click="onClickEditRemark(s.row)"> 编辑 </el-link>
          </div>
        </template>
      </KTable>
    </div>
    <!-- 订单备注 -->
    <EditRemarkModal ref="editRemarkModal" @success="methods.onSearch" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { Download } from '@element-plus/icons-vue';
import { useTableList, payOptions, typeOptions, commissionStatusOptions, treeDataOptions, teamCountOptions, statusObj } from './hooks/use-table';
import { agentOrderListExport } from '@/api/crm-kgj/download';
import { getColonelList } from '@/api/crm-agency/kgj/colonel';
import EditRemarkModal from './components/edit-remark-modal.vue';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({ name: 'AgencyKgjAgentAgentOrder' });
const props = defineProps({
  id: {
    type: [String, Number],
    default: ''
  }
});
const statusClassNameMap: any = {
  0: 'unsettled',
  1: 'settled',
  2: 'part_settled'
};
const { state, tableState, tableEvent, ...methods } = useTableList({
  getParams: ({ _timeArr = [], ...params }) => {
    // 处理时间参数
    if (_timeArr?.length) {
      const [begin, end] = _timeArr;
      params.from_dt = begin;
      params.to_dt = end;
    }
    return {
      ...params,
      colonel_id: params.colonel_id ? params.colonel_id : props.id || -1
    };
  }
});
const onClickExportData = () => {
  agentOrderListExport(methods.getParams(state.params).data);
};
// 编辑
const editRemarkModal = ref();
const onClickEditRemark = (row: any) => {
  editRemarkModal.value.show(1, row);
};
// 重置
const onClickReset = () => {
  methods.onReset();
  treeValues.value = '-1';
};
/**
 * @树形组件
 */
const treeValues = ref('-1');
const treeChange = (value: any) => {
  if (value) {
    const values = value.split('_');
    /** 不限 */
    if (values.length === 1) {
      state.params.vip_level = Number(value);
      state.params.product = Number(value);
      // state.params.team_count = Number(value);
    } else {
      /** 其他版本 */
      state.params.product = Number(values[1]);
      state.params.vip_level = Number(values[0]);
      // state.params.team_count = Number(values[1]);
    }
  } else {
    state.params.product = -1;
    state.params.vip_level = -1;
    // state.params.team_count = -1;
  }
};

/**
 * @代理商接口
 */
const agentOptions: any[] = reactive([{ label: '不限', value: -1 }]);
const getAgentList = async () => {
  const res = await getColonelList({
    params: {
      page: 1,
      limit: 999
    },
    data: {
      extend_type: 1
    }
  });
  if (!res.data) return;
  agentOptions.length = 0;
  agentOptions.push({ label: '不限', value: -1 });
  const items = res.data?.items || [];
  items.forEach((item: Record<string, any>) => {
    agentOptions.push({
      ...item,
      value: item.colonel_id,
      label: item.name
    });
  });
};

getAgentList();
</script>
<style lang="scss" scoped>
.table-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  word-break: break-all;
}

.settled {
  color: #22b20a;
}

.unsettled {
  color: #999;
}

.part_settled {
  color: #c0b019;
}
</style>
